<template>
    <div class="animation-list">
        <div class="div-animation">
            <div>
                <el-tag v-for="(tag, index) in curComponent.animations" :key="index" closable @close="removeAnimation(index)">
                    {{ tag.label }}
                </el-tag>
            </div>
            <el-button class="addAnimation" @click="isShowAnimation = true">添加动画</el-button>
            <el-button class="addAnimation" @click="previewAnimate">预览动画</el-button>
        </div>

        <!-- 选择动画 -->
        <Modal v-model="isShowAnimation">
            <el-tabs v-model="animationActiveName">
                <el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
                    <el-scrollbar class="animate-container">
                        <div class="animate" v-for="(animate, index) in item.children" :key="index" @mouseover="hoverPreviewAnimate = animate.value" @click="addAnimation(animate)">
                            <div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
                                {{ animate.label }}
                            </div>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </Modal>
    </div>
</template>

<script>
import Modal from '@/components/Modal'
import eventBus from '@/utils/eventBus'
import animationClassData from '@/utils/animationClassData'
import { mapState } from 'vuex'

export default {
    components: { Modal },
    data() {
        return {
            isShowAnimation: false,
            hoverPreviewAnimate: '',
            animationActiveName: '进入',
            animationClassData,
            showAnimatePanel: false,
        }
    },
    computed: mapState(['curComponent']),
    methods: {
        addAnimation(animate) {
            this.$store.commit('addAnimation', animate)
            this.isShowAnimation = false
        },

        previewAnimate() {
            eventBus.$emit('runAnimation')
        },

        removeAnimation(index) {
            this.$store.commit('removeAnimation', index)
        },
    },
}
</script>

<style lang="scss">
.animation-list {
    margin-top: -10px;
    .div-animation {
        text-align: center;

        & > div {
            margin-top: 20px;
        }

        .el-tag {
            display: block;
            width: 50%;
            margin: auto;
            margin-bottom: 10px;
        }
    }

    .el-scrollbar__view {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 10px;

        .animate > div {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 12px;
            margin: 10px;
            font-size: 12px;
            border-radius: 3px;
            user-select: none;
            cursor: pointer;
            width: 87px;
            height: 50px;
            background: #6b828666;
            color: #ffffff80;
        }
    }
}
.addAnimation {
    background: linear-gradient(270deg, #69abb3 0%, #62c1ce 29%, #25a3b8 100%);
    border-radius: 4px;
    border: none;
    width: 98px;
    height: 32px;
}
.el-button:focus, .el-button:hover {
    color: #fff;
}
</style>